<template>
    <div>
        <page-view>
            <template #option>
                <div class="btn-box">
                    <el-button type="primary" @click="add">新增</el-button>
                </div>
            </template>

            <template #form>

                <SearchForm :data-form="formInline" @on-search="onSearch" @onReset="onSearch">
                    <el-form-item prop="categoryName">
                        <el-input v-model="formInline.categoryName" placeholder="请输入类型名称" clearable />
                    </el-form-item>
                </SearchForm>
            </template>
          <template #table="tableScope">
            <PubilcTable :isSlot="false" :table-data="tableData" :tableHeight="tableScope.tableHeight" :list-config="DATE_TYPE_CONFIG" :page-data="pageData"
                @on-action="onAction" :translateTextDeal="translateTextDeal" />
          </template>
        </page-view>
        <addAndEdit v-if="dialogVisible" :dialogVisible="dialogVisible" @handleClose="handleClose" @on-update="onSearch"
            :dataForm="dataForm" :type="type"></addAndEdit>
    </div>
</template>
<script  setup name="DateType">
import { reactive } from 'vue'
import { DATE_TYPE_CONFIG, WEEK_LIST } from '../Common/config'
import { statusText } from '@/util/index'
import { ElMessage, ElMessageBox } from 'element-plus'
import api from '@/api'
import addAndEdit from './addAndEdit.vue'
const formInline = ref({
    categoryName: ''
})
const pageData = ref({
    pageNum: 1,
    pageSize: 10,
    total: 0
})

const dataForm = ref({
    days: [],
    categoryName: ''
})

const tableData = ref([])

const dialogVisible = ref(false)

const type = ref('add')

onMounted(() => {
    getList()
})
const onSearch = () => {
    pageData.value.pageNum = 1
    getList()
}

// 获取列表数据
const getList = () => {
    const parms = {
        ...pageData.value,
        ...formInline.value
    }
    api.feeConfig.dateTypeList(parms).then(res => {
        const { list, total } = res
        pageData.value.total = total
        tableData.value = list

    })

}


const editRow = (row) => {
    dataForm.value = { ...row }
    type.value = 'edit'
    dialogVisible.value = true

}
const deleteRow = (row) => {
    ElMessageBox.confirm(
        '您确定要进行删除操作吗?',
        '温馨提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            api.feeConfig.dateDelete({ id: row.id }).then(res => {
                onSearch()
                ElMessage.success('操作成功')
            })
        })
}
// 列表操作 分页
const onAction = ([item, row]) => {
    const obj = {
        'edit': editRow,
        'del': deleteRow,
        'pageNum': getList,
        'pageSize': onSearch
    }
    if (typeof item === 'string') {
        pageData.value[item] = row
        obj[item]()
    } else {
        obj[item.alias](row)
    }
}



// 新增
const add = () => {
    type.value = 'add'
    dialogVisible.value = true
    dataForm.value = {
        days: [],
        categoryName: ''
    }

}


const handleClose = () => {
    dialogVisible.value = false
}

const translateTextDeal = (item, val) => {
    let text = ''
    if (val) {
        try {
            const { days, endDate, startDate } = JSON.parse(val)
            let daysText = '', dateText = ''
            if (days.length > 0) {
                days.forEach(item => {
                    daysText += statusText(WEEK_LIST, item) + '、'
                })
            }
            if (startDate && startDate != '') dateText = startDate + ' 至 ' + endDate
            text = daysText + dateText


        } catch (error) {

        }
    }
    return text

}
onActivated(() => {
    getList()

})
</script>
